import React, { Component, Fragment } from "react";
// antd
import { Button, Col, Pagination, Form, Input, Tag, Select, Table, Space, notification } from "antd";
import {CopyToClipboard} from 'react-copy-to-clipboard';
import { CopyOutlined, CheckOutlined } from '@ant-design/icons';

// http
import http from '../../../utils/request';
const { Option } = Select;

class CloudRamUserAk extends Component {
    constructor(props){
        super(props);
        this.state = {
            // 表格分页
            total: '',
            page: 1,
            page_number: 10,
            dataSource: [],
            columns: [
                {title: "AccessKey", dataIndex: "access_key_id", key: "access_key_id",
                    render: (text, rowData) => {
                        return(
                            <Space direction="vertical">
                                <CopyToClipboard text={rowData.access_key_id} 
                                    onCopy={() => 
                                        this.setState({copied: true},
                                        notification.open({
                                            message: '已复制到剪贴板',
                                            icon: <CheckOutlined style={{ color: 'green' }} />,
                                            duration: 2,
                                            placement: 'top',
                                        })
                                    )}
                                >
                                    <span><span style={{marginRight: "5px"}}><CopyOutlined /></span><span style={{color: "#6587FF"}}>{rowData.access_key_id}</span></span>
                                </CopyToClipboard>                                 
                            </Space>
                        )
                    }
                },
                {title: "子账户登录名", dataIndex: "login_name", key: "login_name",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.login_name}</Tag>
                            </div>
                        )
                    }
                },
                {title: "云平台", dataIndex: "cloud-platform", key: "cloud-platform",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.platform}-{rowData.account_name}</Tag>
                            </div>
                        )
                    }
                },
                {title: "状态", dataIndex: "status", key: "status",
                    render: (text, rowData) => {
                        const status = rowData.status === '活跃' ? <Tag color="blue">{rowData.status}</Tag> : <Tag color="magenta">{rowData.status}</Tag>

                        return(
                            <div>
                                {status}
                            </div>
                        )
                    }
                },
                {title: "最后使用时间", dataIndex: "last_used_date", key: "last_used_date"},
                {title: "最后调用服务", dataIndex: "last_used_role", key: "last_used_role"},
            ],
            loading: false,
            search_login_name: null,
            search_access_key_id: null,
            search_account_name: null,
            search_platform: null,
            search_status: null,
            search_last_used_date: null,
            search_option_account: [],
            search_option_platform: [],
        }
    }

    componentDidMount() {
        this.loadData()
        this.loadDataPlatform()
    }

    loadDataPlatform = () => {
        const requestData = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/cloud/platform', {params: requestData}).then(response=>{
            const search_option_platform = []
            const resp_data = response.data.data.items
            for (let i = 0; i < resp_data.length; i++) {
                search_option_platform.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
            }
            this.setState({
                search_option_platform: search_option_platform
            })
        })
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'login_name__contains': this.state.search_login_name,
            'access_key_id__contains': this.state.search_access_key_id,
            'status': this.state.search_status,
            'platform': this.state.search_platform,
            'account_name': this.state.search_account_name,
            'last_used_date': this.state.search_last_used_date
        }

        // 获取分组列表
        http.get('/cloud/ram/ak', {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    /** 切换每页数量 */
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
    }

    /** 云平台搜索 */
    onFinishSearch = (data) => {
        this.setState({
            page: 1,
            search_login_name: data.login_name ? data.login_name : null,
            search_access_key_id: data.access_key_id ? data.access_key_id: null,
            search_account_name: data.account_name ? data.account_name : null,
            search_platform: data.platform ? data.platform : null,
            search_status: data.status,
            search_last_used_date: data.last_used_date
        })
        this.loadData()
    }

    // 搜索切换云平台
    onChangePlatform = (value) => {
        if (value) {
            this.setState({
                search_instance_platform: value
            })

            const requestData = {
                'page': 1,
                'limit': 1000,
                'platform': value
            }
    
            http.get('/cloud/account', {params: requestData}).then(response=>{
                const search_option_account = []
                const resp_data = response.data.data.items
                for (let i = 0; i < resp_data.length; i++) {
                    search_option_account.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
                }
                this.setState({
                    search_option_account: search_option_account
                })
            })

        } else {
            this.setState({
                search_option_account: '',
            })
        }
    }

    // 搜索云账户
    onChangeAccountName = (value) => {
        this.setState({
            search_account_name: value ? value : null
        })
    }

    render(){
        const { loading, dataSource, columns, page, total, search_option_platform, search_option_account } = this.state
        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}
        return (
            <Fragment>

                <Form layout="inline" onFinish={this.onFinishSearch} size="small">
                    <Form.Item label="云平台" name="platform">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 160 }}
                            placeholder="请选择区域"
                            optionFilterProp="children"
                            onChange={this.onChangePlatform}
                            filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {search_option_platform}
                        </Select>
                    </Form.Item>

                    <Form.Item label="云账户" name="account_name">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 160 }}
                            placeholder="请选择云账户"
                            onChange={this.onChangeAccountName}
                            >
                            {search_option_account}
                        </Select>                      
                    </Form.Item>

                    <Form.Item label="状态" name="status">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="请选择密钥状态"
                            >
                            <Option key="Active">活跃</Option>
                            <Option key="Inactive">禁用</Option>
                        </Select>  
                    </Form.Item>

                    <Form.Item label="最后使用" name="last_used_date">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="最后使用时间"
                            >
                            <Option key="N/A">N/A</Option>
                        </Select>  
                    </Form.Item>

                    <Form.Item label="登录名" name="login_name">
                        <Input placeholder="请输入子账户登录名"  />
                    </Form.Item>

                    <Form.Item label="AccessKeyID" name="access_key_id">
                        <Input placeholder="请输入AccessKeyID"  />
                    </Form.Item>

                    <Form.Item shouldUpdate={true}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>

                <div style={myStyle1}></div>
                <div>
                    <Table
                        pagination={false} 
                        rowKey="id" 
                        columns={columns} 
                        dataSource={dataSource}
                        loading={loading}
                        scroll={{ y: 500, x: '70vw' }}
                    >
                    </Table>
                </div>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>

            </Fragment>
        )
    }
}
export default CloudRamUserAk;